<%@ Page Language="vb" AutoEventWireup="false" CodeFile="DNNToolBar.aspx.vb" Inherits="DNNToolBar" MasterPageFile="~/MasterPage.master"%>
<%@ Register TagPrefix="code" TagName="view" Src="usercontrols\codeview.ascx" %>
<%@ Register TagPrefix="DNN" Namespace="DotNetNuke.UI.WebControls" Assembly="DotNetNuke.WebControls" %>
<asp:content id="header" contentplaceholderid="HeaderPlaceHolder" runat="Server">
    <link href="css/tabstrip.css" type="text/css" rel="stylesheet" />
    <link href="DNNToolBar.aspx.css" type="text/css" rel="stylesheet" />
    <script src="DNNToolBar.aspx.js" language="javascript"></script>
</asp:Content>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">

    <br>
    <DNN:DNNTabStrip ID="MyDNNTabStrip" runat="server" TabRenderMode="All" DefaultContainerCssClass="tabcontainer"
        DefaultLabel-CssClass="tablabel" DefaultLabel-CssClassHover="tablabel tablabelhover" DefaultLabel-CssClassSelected="tablabel tablabelselected">
        <DNN:DNNTab ID="tab1" runat="server" Label-Text="Sample 1">
            <DNN:DNNLabelEdit ID="leSample1" runat="server" CssClass="label" LabelEditCssClass="labeledit"
                WorkCssClass="labeleditwork" MouseOverCssClass="labelhover">
							Click To Edit
            </DNN:DNNLabelEdit>
            <p class="sampledescription">
                This control shows the default behavior of the LabelEdit with minimal styling associated.
                Clicking on the text will place the control in edit mode. Clicking away (loosing
                focus) will cause the control to persist its changes
            </p>
            <code:view id="cv1" runat="server" ImageUrl="~/images/icon_html.gif`~/images/icon_css.gif"
                CodeFile="~/DNNToolBarSrcView/htm1.htm`~/DNNToolBarSrcView/css1.htm" ToolTip="Markup`CSS" />
        </DNN:DNNTab>
        <DNN:DNNTab ID="tab2" runat="server" Label-Text="Sample 2">
            <DNN:DNNLabelEdit ID="leSample2" runat="server" CssClass="label" LabelEditCssClass="labeledit"
                WorkCssClass="labeleditwork" MouseOverCssClass="labelhover" EventName="ondblclick"
                BeforeSaveFunction="promptForSave">
							Double Click To Edit
            </DNN:DNNLabelEdit>
            <p class="sampledescription">
                This control demonstrates two properties: EventName and BeforeSaveFunction. The
                EventName property allows you to customize the event that puts the control into
                edit mode. By default this event is 'onclick'. This sample changes the the value
                to 'ondblclick'. Any event that the browser recognizes will work here. Additionally,
                you may choose the value of 'none'.
                <br>
                <br>
                The BeforeSaveFunction allows you to code custom logic before a save will occur.
                The return value of this function will determine whether or not the value saves.
            </p>
            <code:view id="cv2" runat="server" ImageUrl="~/images/icon_html.gif`~/images/icon_css.gif`~/images/icon_script.gif"
                CodeFile="~/DNNToolBarSrcView/htm2.htm`~/DNNToolBarSrcView/css1.htm`~/DNNToolBarSrcView/js2.htm"
                ToolTip="Markup`CSS`JS" />
        </DNN:DNNTab>
        <DNN:DNNTab ID="tab3" runat="server" Label-ToolTip="ToolBar Images" Label-Text="Sample 3">
            <DNN:DNNLabelEdit ID="leSample3" runat="server" RichTextEnabled="True" CssClass="label"
                LabelEditCssClass="labeledit" WorkCssClass="labeleditwork" EventName="none" ToolBarId="tbSample3">Click ToolBar To Edit</DNN:DNNLabelEdit>
            <DNN:DNNToolBar ID="tbSample3" runat="server" CssClass="toolbar" DefaultButtonCssClass="toolbarbuttonimg"
                DefaultButtonHoverCssClass="colorhover">
                <DNN:DNNToolBarButton ImageUrl="images/icon_edit.gif" ID="tbImgEdit" ControlAction="edit"
                    ToolTip="Edit" />
                <DNN:DNNToolBarButton ImageUrl="images/icon_save.gif" ID="tbImgSave" ControlAction="save"
                    ToolTip="Save" />
                <DNN:DNNToolBarButton ImageUrl="images/icon_cancel.gif" ID="tbImgCancel" ControlAction="cancel"
                    ToolTip="Cancel" />
                <DNN:DNNToolBarButton ImageUrl="images/icon_bold.gif" ID="tbImgBold" ControlAction="bold"
                    ToolTip="Bold" />
                <DNN:DNNToolBarButton ImageUrl="images/icon_italic.gif" ID="tbImgItalic" ControlAction="italic"
                    ToolTip="Italic" />
            </DNN:DNNToolBar>
            <p class="sampledescription">
                This control shows the LabelEdit with Rich Text editing turned on along with a toolbar
                associated. This toolbar uses images for the buttons which is a little easier to
                manage across browsers. The obvious negatives of using the images in the markup
                is that skinners will have no control over thier look. Additionally, the browser
                will make individual requests for each unique image.
                <br>
                <br>
                This sample also demonstrates the use of internal known actions of the control it
                is associated to (edit, save, cancel, bold, and italic). More information on actions
                will be shown in the following samples. (Note: Only browsers that support rich text
                will show the rich text toolbar)
            </p>
            <code:view id="cv3" runat="server" ImageUrl="~/images/icon_html.gif`~/images/icon_css.gif"
                CodeFile="~/DNNToolBarSrcView/htm3.htm`~/DNNToolBarSrcView/css3.htm" ToolTip="Markup`CSS" />
        </DNN:DNNTab>
        <DNN:DNNTab ID="tab4" runat="server" Label-Text="Sample 4">
            <DNN:DNNLabelEdit ID="leSample4" runat="server" CssClass="label" LabelEditCssClass="labeledit"
                WorkCssClass="labeleditwork" EventName="none" ToolBarId="tbSample4">Click ToolBar To Edit</DNN:DNNLabelEdit>
            <DNN:DNNToolBar ID="tbSample4" runat="server" CssClass="toolbar" DefaultButtonCssClass="toolbarbutton"
                DefaultButtonHoverCssClass="borderhover">
                <DNN:DNNToolBarButton ControlAction="edit" ID="tbEdit" ToolTip="Edit" CssClass="button_edit" />
                <DNN:DNNToolBarButton ControlAction="save" ID="tbSave" ToolTip="Save" CssClass="button_save" />
                <DNN:DNNToolBarButton ControlAction="cancel" ID="tbCancel" ToolTip="Cancel" CssClass="button_cancel" />
            </DNN:DNNToolBar>
            <p class="sampledescription">
                This control shows the the LabelEdit with a toolbar associated, just like the previous
                example. The difference is this toolbar uses css to define its sizing which is a
                little more complicated to work just right between browsers, but does allow the
                skinner complete control over the look. Like the previous sample, this one still
                causes the browser to make a unique request for each image.
            </p>
            <code:view id="cv4" runat="server" ImageUrl="~/images/icon_html.gif`~/images/icon_css.gif"
                CodeFile="~/DNNToolBarSrcView/htm4.htm`~/DNNToolBarSrcView/css4.htm" ToolTip="Markup`CSS" />
        </DNN:DNNTab>
        <DNN:DNNTab ID="tab5" runat="server" Label-Text="Sample 5">
            <DNN:DNNLabelEdit ID="leSample5" runat="server" CssClass="label" RichTextEnabled="True" RenderAsDiv="true"
                LabelEditCssClass="labeledit" WorkCssClass="labeleditwork" EventName="none" ToolBarId="tbSample5">Click ToolBar To Edit</DNN:DNNLabelEdit>
            <DNN:DNNToolBar ID="tbSample5" runat="server" CssClass="toolbarbackimg" DefaultButtonCssClass="toolbarbuttonbackimg"
                DefaultButtonHoverCssClass="borderhover">
                <DNN:DNNToolBarButton ControlAction="edit" ID="tbEdit2" ToolTip="Edit" CssClass="button_edit" runat="server"/>
                <DNN:DNNToolBarButton ControlAction="save" ID="tbSave2" ToolTip="Save" CssClass="button_save" runat="server"/>
                <DNN:DNNToolBarButton ControlAction="cancel" ID="tbCancel2" ToolTip="Cancel" runat="server"/>
                <DNN:DNNToolBarButton ControlAction="bold" ID="tbBold2" ToolTip="Bold" runat="server"/>
                <DNN:DNNToolBarButton ControlAction="italic" ID="tbItalic" ToolTip="Italic" runat="server"/>
                <DNN:DNNToolBarButton ControlAction="underline" ID="tbUnderline" ToolTip="Underline" runat="server"/>
                <DNN:DNNToolBarButton ControlAction="justifyleft" ID="tbJustifyLeft" ToolTip="Justify Left" runat="server"/>
                <DNN:DNNToolBarButton ControlAction="justifycenter" ID="tbJustifyCenter" ToolTip="Justify Center" runat="server"/>
                <DNN:DNNToolBarButton ControlAction="justifyright" ID="tbJustifyRight" ToolTip="Justify Right" runat="server"/>
                <DNN:DNNToolBarButton ControlAction="insertorderedlist" ID="tbOrderedList" ToolTip="Ordered List" runat="server"/>
                <DNN:DNNToolBarButton ControlAction="insertunorderedlist" ID="tbUnorderedList" ToolTip="Unordered List" runat="server"/>
                <DNN:DNNToolBarButton ControlAction="outdent" ID="tbOutdent" ToolTip="Outdent" runat="server"/>
                <DNN:DNNToolBarButton ControlAction="indent" ID="tbIndent" ToolTip="Indent" runat="server"/>
                <DNN:DNNToolBarButton ControlAction="createlink" ID="tbCreateLink" ToolTip="Create Link" />
            </DNN:DNNToolBar>
            <p class="sampledescription">
                This control shows the the LabelEdit with a toolbar associated. The difference is
                this toolbar a single image for all buttons on it. This image is assigned as the
                toolbar's background image.
                <img src="images/edittoolbar.gif" />. This demonstrates the best of all scenerios
                from a skinners and efficency viewpoint. The only negative is the css-hacks that
                are necessary to get things to look consistent between browsers.
            </p>
            <code:view id="cv5" runat="server" ImageUrl="~/images/icon_html.gif`~/images/icon_css.gif"
                CodeFile="~/DNNToolBarSrcView/htm5.htm`~/DNNToolBarSrcView/css5.htm" ToolTip="Markup`CSS" />
        </DNN:DNNTab>
        <DNN:DNNTab ID="tab6" runat="server" Label-Text="Sample 6">
            <div id="div1" runat="server" style="background: yellow;">
                Click this Div to show toolbar that is associated</div>
            <br />
            <br />
            <asp:Image ID="img1" runat="server" ImageUrl="images/dotnetnukelogo.gif" />
            <DNN:DNNToolBar ID="tbSample6" runat="server" CssClass="toolbar" DefaultButtonCssClass="toolbarbuttontext">
                <DNN:DNNToolBarButton Text="My Action" ID="tbMyAction" ControlAction="MyAction" Key="MyAction" runat="server"/>
                <DNN:DNNToolBarButton JSFunction="alert('test javascript')" Text="js" ID="tbJs" ControlAction="js" runat="server" Key="MyJs" />
                <DNN:DNNToolBarButton NavigateUrl="default.aspx" Text="nav" ID="tbNavigate" ControlAction="navigate" runat="server" Key="MyNav" />
            </DNN:DNNToolBar>
            <p class="sampledescription">
                This sample shows how ordinary elements like DIV and Image controls can be associated
                with a toolbar. This is accomplished through the RegisterToolBar method (see code
                icon). Obviously, these controls do not implement the IDNNToolBarSupportedActions
                so the only actions that they can do are: js, navigate, or custom. This sample shows
                all three.
            </p>
            <code:view id="cv6" runat="server" ImageUrl="~/images/icon_html.gif`~/images/icon_css.gif`~/images/object.gif"
                CodeFile="~/DNNToolBarSrcView/htm6.htm`~/DNNToolBarSrcView/css6.htm`~/DNNToolBarSrcView/vb6.htm"
                ToolTip="Markup`CSS`Code Behind" />
        </DNN:DNNTab>
    </DNN:DNNTabStrip>
</asp:Content>
